<template>
  <div class="order-container">
    <van-tabs v-model="active">
      <van-tab :title="tab.title" v-for="tab in tabsList" :key="tab.title">
        <div
          class="order"
          v-for="item in filterOrderList"
          :key="item.id"
          @click="$router.push('/orderdetail/' + item.order_id)"
        >
          <!-- 循环订单下面的商品 -->
          <van-card
            v-for="good in item.goods"
            :key="good.id"
            :price="good.sell_price + '.00'"
            :title="good.title"
            :thumb="good.thumb_path"
          >
          </van-card>

          <van-divider></van-divider>

          <div class="footer">
            <span>
              {{ $dateFormat(item.add_time * 1000, 'YYYY-MM-DD') }}
            </span>
            <div>
              <span>共{{ item.number }}件商品 </span>
              <span>应付金额：</span>
              <span>&yen;{{ item.total_price }}</span>
            </div>
          </div>

          <div class="orderbtn">
            <template v-if="item.status == 0 && item.is_cancel == 0">
              <van-button size="mini" plain type="danger"> 立即付款 </van-button>
            </template>

            <span class="cancelText" v-if="item.is_cancel == 1"> 订单已取消 </span>

            <van-button size="mini" plain v-if="item.status == 1" type="primary"> 已付款 </van-button>

            <van-button size="mini" plain v-if="item.is_finish == 1" type="default"> 已完成 </van-button>
          </div>
        </div>
        <van-empty v-if="!filterOrderList.length" description="暂无订单" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { reqUserOrder } from '@/api/order'
export default {
  data() {
    return {
      active: 0,
      tabsList: [{ title: '全部' }, { title: '未付款' }, { title: '待发货' }, { title: '已完成' }],
      orderList: [],
    }
  },
  computed: {
    // 筛选出不同订单状态列表
    filterOrderList() {
      let active = this.active
      if (active === 0) {
        return this.orderList
      }

      if (active === 1) {
        return this.orderList.filter((item) => item.status === 0)
      }

      if (active === 2) {
        // 待发货
        return this.orderList.filter((item) => item.status === 1 && item.is_out === 0)
      }

      // 已完成
      return this.orderList.filter((item) => item.is_finish === 1)
    },
  },
  methods: {
    async getUserOrder() {
      let orderList = await reqUserOrder()
      this.orderList = orderList
      console.log(orderList)
    },
  },
  mounted() {
    this.getUserOrder()
  },
}
</script>

<style lang="scss" scoped>
.order-container {
  .order {
    margin: 10px 0;
    background-color: #fff;

    .van-card {
      background: #fff;
    }

    .van-card:not(:first-child) {
      margin-top: 0;
    }

    .van-divider {
      margin: 4px 0;
    }

    .footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 2px 8px;
      font-size: 12px;
      color: #554646;
    }

    .orderbtn {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 4px;
      font-size: 12px;
      color: #554646;

      .cancelText {
        padding: 0 6px;
      }
    }
  }
}
</style>
